<!--
 * @Author: Jackie
 * @Date: 2021-01-01 16:02:04
 * @LastEditors: Jackie
 * @LastEditTime: 2021-01-07 11:16:19
 * @Description: 大屏数据-主文件
 * @FilePath: \temp-project\src\components\index.vue
-->
<template>
<div id="data-view">
  <div class="header">
    <div class="headerTmp">
      <div class="column left">
        <div class="showTimeContainer">
          <div class="showTime">{{tmp_date}}</div>
          <div class="showTime">{{tmp_time}}</div>
          <div class="showTime">{{tmp_week}}</div>
        </div>
        
      </div>
      <div class="column mid">
        <div class="title">{{title}}</div>
        <div class="subtile">{{subtile}}</div>
      </div>
      <div class="column right">
        <div class="TabContainer">
          <div class="headerTab">项目管理</div>
          <div class="headerTab">党组生活</div>
          <div class="headerTab">最多跑一次</div>
        </div>
      </div>
    </div>
  </div>
  <div class="mainBox">
    <div class="panel left">
      <div class="box">
      <Budget/><!--年度预算-->
      </div>
      <div class="box">
      <Annual/><!--年度数量-->
      </div>
    </div>
    <div class="panel mid">
      <div class="box">
        <!--选择框-->
        <div class="filter">
            <select >
                  <option v-for="item in options"  value="item.value">{{item.label}}</option>
              </select>
              <select >
                  <option v-for="item in options"  value="item.value" >{{item.label}}</option>
              </select>
              <button>查询</button>
        </div>
      </div>
      <div class="box">地图</div>
      <div class="box">
        <Evaluate/><!--竞评-->
        </div>
    </div>
    <div class="panel right">
      <div class="box">
        <Dimdate/>
      </div>
      <div class="box">
        <PatentApplyTarget/>
      </div>
      <div class="box">
        <PatentApplySatus/>
      </div>
    </div> 
   
  </div>
</div>

</template>


<script>
import moment from 'moment'
import Budget from "./Budget.vue"
import Annual from "./Annual.vue"
import Evaluate from "./Evaluate.vue"
import Dimdate from "./Dimdate.vue"
import PatentApplySatus from "./PatentApplySatus.vue"
import PatentApplyTarget from "./PatentApplyTarget.vue"
export default {
  components: {Budget,Annual,Evaluate,Dimdate,PatentApplySatus,PatentApplyTarget},
  data(){
    return{
      weekArr : [ "星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六" ],
      title:'浙江省能源集团有限公司',
      subtile:"科技与信息化管理部",
      tmp_date:'',
      tmp_time:'',
      tmp_week:'',
      options: [{
                value: '选项1',
                label: '黄金糕'
                }, {
                value: '选项2',
                label: '双皮奶'
                }, {
                value: '选项3',
                label: '蚵仔煎'
                }],
            value: '选项1' 
    }
  },
  mounted(){
      let _this = this; // 声明一个变量指向Vue实例this，保证作用域一致
      this.timer = setInterval(() => {
        _this.tmp_date=moment(new Date()).format("YYYY-MM-DD")
        _this.tmp_time=moment(new Date()).format("HH: mm: ss")
        _this.tmp_week=this.weekArr[moment(new Date()).day()]
      }, 1000)
  },
  beforeDestroy() {
    if (this.timer) {
      // 在Vue实例销毁前，清除我们的定时器
      clearInterval(this.timer); 
    }
  },
  methods:{},
}
</script>

<style  lang="less"  scoped>
//头部部分
.header{
  position: relative;
  width: 100%;
  height: 1.65rem;//132px;
  background: url('../assets/img/Header.png') no-repeat;
  background-size: 100% 100%;
  display: flex;
  justify-content: center;
  align-items: flex-start;//让文本框向上垂直
  .headerTmp{
    //头部上面文字的部分
    width: 100%;height: 1.125rem;//90px;
    margin: 0 .625rem;//0 50px
    color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-align: center;
    .column{
      flex:1;
      display: flex;
      justify-content: flex-start;//水平向左
      align-items: center;
      }
    .column:nth-child(2){
      flex:2;
    }
    .showTimeContainer{//头部的左边展示时间
        margin: 0 .5rem;//0 40px
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        font-family: "NotoSansHans-Light";
        font-weight: 300;
        font-size: .2625rem;//21px;
        .showTime{padding: 0 .125rem; }//0 10px
      }
    .right{
      justify-content: flex-end;
    }
    .TabContainer{//头部的右边
      margin: 0 .3125rem;
      display: flex;
      justify-content: space-between;
      font-family: "NotoSansHans-Light";
      font-weight: 300;
      font-size: .2625rem;//21px;
      .headerTab{padding: 0 0 0 .5rem; }//0 10px
      }
    >.mid{//头部的中间-标题
      flex: 2;
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;
      .title{
        font-size: .413625rem;//33.09px;
        font-family: "NotoSansHans-Bold";
        font-weight: 700;
      }
      .subtile{
        position: absolute;
        bottom: -50%;
        font-size: .375rem;//30px;
        transform: translate(0%,70%);
        font-family: "NotoSansHans-Light";
        font-weight: 300;
      }
    }
      
}
    
    
}
.mainBox{
  //中间主体部分
  min-width: 12.8rem;//1024px;
  max-width: 24rem;//1920px;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  text-align: center;
  padding: 0 .625rem .25rem .625rem; //0 50 20 50
  border: 1px solid yellow;
  color: #fff;
  .panel{
    //每一部分占3份
    height: 100%;
    flex: 3;
    border: 1px solid pink; 
  }
  .panel:nth-child(2){
    //中间部分占5份
    flex: 5;
  } 
  //左边
  .left{
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    .box{
      flex: 1;
      border: 1px solid palevioletred;
      // margin: 10px;
    }
    .box:nth-child(2){
      flex:2;
    }
  }
  .mid{
      width: 100%;height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      .box{
        flex: 1;
        border: 1px solid yellow; 
        // margin: .125rem;//10px;
      }
      .box:nth-child(2){
        flex: 5;
      }
      .box:nth-child(3){
        flex: 4;
      }
      //选择框
      .filter{
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      select {
      height: .375rem;//30px;
      width: 1.65rem;//132px;
      border-radius: .1rem;//8px;
      border:  1.5px solid blue ;
      outline: none;
      color: #fff;
      background-color:#000707;
      margin: .225rem .45rem;//18px 36px;
      padding:0 10px;
      }
      button{
          height: .375rem;//30px;
          width: 1.05rem;//84px;
          border-radius: .1rem;//8px;
          margin: .225rem .45rem;//18px 36px;
          background-color: blue;
          color: #fff;
          border: none;
          }
      } 
  }
  .right{
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    .box{
      flex: 1;
      border: 1px solid palevioletred;
      // margin: .125rem//10px;
    } 
    .box:nth-child(2){
      flex: 4.4;
    } 
    .box:nth-child(3){
      flex: 3.7;
    } 
  }

}

</style>
